// import { Form, Input, Select } from 'element-react';
import { useState, useEffect } from 'react';
import {
  Form,
  Input,
  Select,
  Button,
  Tooltip,
  Table,
  Tag,
  Space,
  Badge,
} from 'antd';
import {
  SearchOutlined,
  PlusOutlined,
  DeleteOutlined,
  SyncOutlined,
  AppstoreOutlined,
  EditOutlined,
} from '@ant-design/icons';
import {
  ShopNoticeModelState,
  ShopNoticeModelType,
  useDispatch,
  useSelector,
} from 'umi';
import './index.less';
const { Option } = Select;
export default function ProdProdTag() {
  const dispatch = useDispatch();
  const columns: any[] = [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      align: 'center',
    },
    {
      title: '公告内容',
      dataIndex: 'title',
      key: 'title',
      align: 'center',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      align: 'center',
      render: (value: string) => {
        return (
          <span>
            <span>
              {value == '1' ? (
                <Tag color="blue">公布</Tag>
              ) : (
                <Tag color="red">撤销</Tag>
              )}
            </span>
          </span>
        );
      },
    },
    {
      title: '是否置顶',
      dataIndex: 'isTop',
      key: 'isTop',
      align: 'center',
      render: (value: string) => {
        return (
          <span>
            <span>
              {value == '1' ? (
                <Tag color="blue">是</Tag>
              ) : (
                <Tag color="blue">否</Tag>
              )}
            </span>
          </span>
        );
      },
    },
    {
      title: '操作',
      key: 'action',
      align: 'center',
      render: () => (
        <Space size="middle">
          <Button type="primary" icon={<EditOutlined />}>
            修改
          </Button>
          <Button type="primary" danger icon={<DeleteOutlined />}>
            删除
          </Button>
        </Space>
      ),
    },
  ];
  const { shopNoticeList } = useSelector(
    (state: { shopNotice: ShopNoticeModelState }) => state.shopNotice,
  );
  useEffect(() => {
    dispatch({
      type: 'shopNotice/getShopNotice',
    });
  }, []);
  const [flag, setFlag] = useState(true);
  const [name,setName] = useState("");
  const [state,setState] = useState("");
  const [topping,setTopping] = useState("");
  //显隐
  const onDisplay = () => {};
  //搜索按钮显示from
  const onFlag = () => {
    setFlag(!flag);
  };
  //刷新
  const onRefresh = () => {
    window.location.reload();
  };

  return (
    <div className="shop-notice">
      <div
        className="shop-notice-from"
        style={flag ? { display: 'block' } : { display: 'none' }}
      >
        <Form layout="inline">
          <Form.Item name="price" label="标签名称">
            <Input placeholder="标签名称" />
          </Form.Item>
          <Form.Item label="状态">
            <Select placeholder="状态" style={{ width: 191 }} allowClear>
              <Option value="shanghai">正常</Option>
              <Option value="beijing">禁用</Option>
            </Select>
          </Form.Item>
          <Form.Item label="是否置顶">
            <Select placeholder="是否置顶" style={{ width: 191 }} allowClear>
              <Option value="no">否</Option>
              <Option value="yes">是</Option>
            </Select>
          </Form.Item>
          <Form.Item>
            <Button type="primary" icon={<SearchOutlined />}>
              搜索
            </Button>
            <Button icon={<DeleteOutlined />}>清空</Button>
          </Form.Item>
        </Form>
      </div>
      <div className="avue-crud">
        <div className="avue-crud-left">
          <Button type="primary" icon={<PlusOutlined />}>
            新建
          </Button>
        </div>
        <div className="avue-crud-right">
          <Tooltip title="刷新">
            <Button
              shape="circle"
              icon={<SyncOutlined style={{ fontSize: '12px' }} />}
              size="large"
            />
          </Tooltip>
          <Tooltip title="显隐">
            <Button
              shape="circle"
              icon={<AppstoreOutlined style={{ fontSize: '12px' }} />}
              size="large"
            />
          </Tooltip>
          <Tooltip title="搜索">
            <Button
              shape="circle"
              icon={<SearchOutlined style={{ fontSize: '12px' }} />}
              size="large"
              onClick={onFlag}
            />
          </Tooltip>
        </div>
      </div>
      <Table bordered={true} columns={columns} dataSource={shopNoticeList} />
    </div>
  );
}
